<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="viewport" content="width=device-width">
  <style media="screen">
    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    html {
      font-size: 20px;
    }

    body {
      overflow: hidden;
    }

    #banner {
      width: 25rem;
      height: 7.8rem;
      overflow: hidden;
    }

    #banner ul {
      width: 9999rem;
      transform: translateX(0px);
    }

    #banner li {
      width: 25rem;
      height: 7.8rem;
      float: left;
      line-height: 7.8rem;
      text-align: center;
    }

    #wrap {
      background: #CCC;
    }

    #content {
      background: #fff;
      transform: translateY(0px);
    }
  </style>
  <script>
    window.onload = function () {
      alert('第二次开始，拖着特别费劲');
      //rem
      document.documentElement.style.fontSize = document.documentElement.clientWidth * 20 / 500 + 'px';

      //拖
      let banner = document.getElementById('banner');
      let banner_ul = banner.children[0];
      let content = document.getElementById('content');

      let banner_left = 0;
      let content_top = 0;

      banner.addEventListener('touchstart', function (ev) {
        let startX = ev.targetTouches[0].clientX;
        let startY = ev.targetTouches[0].clientY;

        let dir = '';

        let disX = startX - banner_left;
        let disY = startY - content_top;

        function fnMove(ev) {
          let x = ev.targetTouches[0].clientX;
          let y = ev.targetTouches[0].clientY;

          if (!dir) {     //方向待确定
            if (Math.abs(x - startX) >= 5) {
              dir = 'x';
            } else if (Math.abs(y - startY) >= 5) {
              dir = 'y';
            }
          } else {        //方向确定了
            if (dir == 'x') {
              banner_left = x - disX;
              banner_ul.style.transform = `translateX(${banner_left}px)`;
            } else {
              content_top = y - disY;
              content.style.transform = `translateY(${content_top}px)`;
            }
          }
        }
        function fnEnd() {
          banner.removeEventListener('touchmove', fnMove, false);
          banner.removeEventListener('touchend', fnEnd, false);

          if (dir == 'x') {               //banner
            let n = Math.round(-banner_left / banner.offsetWidth);

            banner_left = -n * banner.offsetWidth;

            banner_ul.style.transition = '0.7s all ease';
            banner_ul.style.transform = `translateX(${banner_left}px)`;
          } else if (dir == 'y') {         //content

          }
        }

        banner.addEventListener('touchmove', fnMove, false);
        banner.addEventListener('touchend', fnEnd, false);
      }, false);
    }
  </script>
</head>

<body>
  <div id="wrap">
    <div id="content">
      <div id="banner">
        <ul>
          <li style="background:#FC0;">0</li>
          <li style="background:#F0C;">1</li>
          <li style="background:#0CF;">2</li>
          <li style="background:#F0C;">3</li>
          <li style="background:#0FC;">4</li>
        </ul>
      </div>
      <ol>
        <li>asdfasd</li>
        <li>43te</li>
        <li>jhgjk</li>
        <li>asdfasd</li>
        <li>43te</li>
        <li>jhgjk</li>
        <li>asdfasd</li>
        <li>43te</li>
        <li>jhgjk</li>
        <li>asdfasd</li>
        <li>43te</li>
        <li>jhgjk</li>
        <li>asdfasd</li>
        <li>43te</li>
        <li>jhgjk</li>
        <li>asdfasd</li>
        <li>43te</li>
        <li>jhgjk</li>
        <li>asdfasd</li>
        <li>43te</li>
        <li>jhgjk</li>
        <li>asdfasd</li>
        <li>43te</li>
        <li>jhgjk</li>
        <li>asdfasd</li>
        <li>43te</li>
        <li>jhgjk</li>
        <li>asdfasd</li>
        <li>43te</li>
        <li>jhgjk</li>
        <li>asdfasd</li>
        <li>43te</li>
        <li>jhgjk</li>
        <li>asdfasd</li>
        <li>43te</li>
        <li>jhgjk</li>
        <li>asdfasd</li>
        <li>43te</li>
        <li>jhgjk</li>
      </ol>
    </div>
  </div>
</body>

</html>